<template>
  <div class="edit">
    <div class="contentWrap">
      <div class="summarize">
        <div>
          <!-- <span>FOCUS</span><br> -->
          新增文章
        </div>
      </div>
      <div class="content">
        <el-row class="rows">
          <el-col :span="2" class="title">类型</el-col>
          <el-col :span="21">
            <el-select style="width:180px" v-model="typeValue" placeholder="请选择">
              <el-option
                v-for="item in statusArr"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="rows">
          <el-col :span="2" class="title">标题</el-col>
          <el-col :span="21">
            <el-input v-model="title"  placeholder=""></el-input>
          </el-col>
        </el-row>
        <el-row class="rows editDiv">
          <el-col :span="2" class="title">内容</el-col>
          <el-col :span="21" id="editDiv"><div ref="editor" style="text-align:left;height:330px"></div></el-col>
        </el-row>
        <el-row class="rows">
          <el-col :span="23" class="sureBtn">
            <el-button type="primary" @click="getContent">确定添加</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Edit',
  data () {
    return {
      editorContent: '',
      editor: {},
      typeValue: 0,
      title: '',
      statusArr: [{
        id: 0,
        label: '添加文章'
      }, {
        id: 1,
        label: '添加商标'
      }],
    }
  },
  mounted () {
    this.editor = new E(this.$refs.editor)
    // this.editor.customConfig.uploadImgShowBase64 = true
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    this.editor.customConfig.customUploadImg = (files, insert) => {   
      var formdata = new FormData()  
      formdata.append('mainpic', files[0])   
      console.log(formdata.get('mainpic'))
      this.$http({
        method: 'post',
        url: this.api.POST_UPLOAD,
        data: formdata
      }).then(res => {
        console.log(res)
        if (res.data.successs) {
          // 插入图片http://47.105.188.111:9020需要替换
          insert(`http://47.105.188.111:9020/${res.data.data}`)
        }
      }) 
    }
    this.editor.create()
  },
  methods: {
    getContent: function () {
      console.log(this.editorContent)
      if (this.typeValue == 0) {
        this.$http({
          method: 'post',
          // url: this.api.POST_INSERTARTICLE,
          url: this.api.POST_INSERTARTICLE + `?title=${this.title}&content=${this.editorContent}`,
          data: {}
        }).then(res => {
          console.log(res)
          if (res.data.successs) {
            this.$message({
              message: '新增成功！',
              type: 'success'
            });
            this.title = ''
            this.editorContent = ''
            this.editor.txt.clear()
          } else {
            this.$message({
              message: '新增失败！',
              type: 'warning'
            })
          }
        })
      } else if (this.typeValue == 1) {
        this.$http({
          method: 'post',
          url: this.api.POST_INSERTCASE + `?bt=${this.title}&nr=${this.editorContent}`,
          data: {}
        }).then(res => {
          if (res.data.successs) {
            this.$message({
              message: '新增成功！',
              type: 'success'
            })
            this.title = ''
            this.editorContent = ''
            this.editor.txt.clear()
          } else {
            this.$message({
              message: '新增失败！',
              type: 'warning'
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.rows{
  padding-bottom: 30px;
  height: 70px;
  line-height: 70px;
}
.editDiv{
  height: 420px;
}
#editDiv /deep/ .w-e-text-container{
    height:300px !important;
}
.edit{
  width: 1000px;
  margin: 0px auto;
}
.contentWrap {
  width: 1100px;
  margin: 80px auto;
}
.sureBtn{
  text-align: center;
}
.contentWrap .summarize {
  width: 1100px;
  /* height: 25px; */
  padding: 30px 150px 10px;
  font: normal 14px/28px '微软雅黑';
  color: #c9c5c5;
  text-align: center;
  border-top:1px solid #c9c5c5;
  position: relative;
  box-sizing: border-box;
}

.summarize div{
  font: normal 34px/50px '微软雅黑';
  color: #333;
  background: white;
  text-align: center;
  position: absolute;
  width: 210px;
  left: 50%;
  border-left: 1px solid #c9c5c5;
  border-right: 1px solid #c9c5c5;
  margin-left: -105px;
  top: -30px;
}
.content {
  width: 92%;
  /* height: 300px; */
  /* background: red; */
  margin: 10px auto;
  position: relative;
}
.block{
  /* height: 100%; */
  width: 100%;
}
.block img{
  height: 100%;
  width: 100%;
}
</style>
